<template>
  <div class="step2">
    <a-alert
      message="确认转账后，资金将直接打入对方账户，无法退回。"
      show-icon
    />
    <a-descriptions :column="1" class="mt-5">
      <a-descriptions-item label="付款账户">
        ant-design@alipay.com
      </a-descriptions-item>
      <a-descriptions-item label="收款账户">
        test@example.com
      </a-descriptions-item>
      <a-descriptions-item label="收款人姓名"> Vben </a-descriptions-item>
      <a-descriptions-item label="转账金额"> 500元 </a-descriptions-item>
    </a-descriptions>
    <a-divider />
    <BasicForm @register="register" />
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { BasicForm, useForm } from '@/components/form'
import { step2Schemas } from './data'
import { Alert, Divider, Descriptions } from 'ant-design-vue'

export default defineComponent({
  components: {
    BasicForm,
    [Alert.name]: Alert,
    [Divider.name]: Divider,
    [Descriptions.name]: Descriptions,
    [Descriptions.Item.name]: Descriptions.Item,
  },
  emits: ['next', 'prev'],
  setup(_, { emit }) {
    const [register, { validate, setProps }] = useForm({
      labelWidth: 80,
      schemas: step2Schemas,
      actionColOptions: {
        span: 14,
      },
      resetButtonOptions: {
        text: '上一步',
      },
      submitButtonOptions: {
        text: '提交',
      },
      resetFunc: customResetFunc,
      submitFunc: customSubmitFunc,
    })

    async function customResetFunc() {
      emit('prev')
    }

    async function customSubmitFunc() {
      try {
        const values = await validate()
        setProps({
          submitButtonOptions: {
            loading: true,
          },
        })
        setTimeout(() => {
          setProps({
            submitButtonOptions: {
              loading: false,
            },
          })
          emit('next', values)
        }, 1500)
      } catch (error) {}
    }

    return { register }
  },
})
</script>
<style lang="less" scoped>
.step2 {
  width: 450px;
  margin: 0 auto;
}
</style>
